---
title: Number Input
description:
  Used to enter a number, and increment or decrement the value using stepper
  buttons.
links:
  source: components/number-input
  storybook: components-numberinput--basic
  recipe: number-input
  ark: https://ark-ui.com/react/docs/components/number-input
---

<ExampleTabs name="number-input-basic" />

## Usage

```tsx
import { NumberInput } from "@chakra-ui/react"
```

```tsx
<NumberInput.Root>
  <NumberInput.Label />
  <NumberInput.ValueText />
  <NumberInput.Control>
    <NumberInput.IncrementTrigger />
    <NumberInput.DecrementTrigger />
  </NumberInput.Control>
  <NumberInput.Scrubber />
  <NumberInput.Input />
</NumberInput.Root>
```

:::info

If you prefer a closed component composition, check out the
[snippet below](#closed-component).

:::

## Shortcuts

The `NumberInput` component provides a set of shortcuts for common use cases

### NumberInputControl

This component renders the `NumberInput.IncrementTrigger` and
`NumberInput.DecrementTrigger` within it by default.

Writing this:

```tsx
<NumberInput.Control />
```

is shorthand for writing this if you don't need to customize the triggers:

```tsx
<NumberInput.Control>
  <NumberInput.IncrementTrigger />
  <NumberInput.DecrementTrigger />
</NumberInput.Control>
```

## Examples

### Sizes

Pass the `size` prop to the `NumberInput.Root` component to change the size of
the number input.

<ExampleTabs name="number-input-with-sizes" />

### Formatting

Pass the `formatOptions` prop to the `NumberInput.Root` component to format the
number input value. The value of this maps to `Intl.NumberFormatOptions` and is
applied based on the current locale.

<ExampleTabs name="number-input-with-format-options" />

### Min and Max

Pass the `min` and `max` props to the `NumberInput.Root` component to set the
minimum and maximum values of the number input.

If value entered is less than `min` or greater than `max`, the value will be
clamped to the nearest boundary on blur, or enter key press.

<ExampleTabs name="number-input-with-min-max" />

### Step

Pass the `step` prop to the `NumberInput.Root` component to change the increment
or decrement interval of the number input.

<ExampleTabs name="number-input-with-step" />

### Controlled

Pass the `value` and `onValueChange` props to the `NumberInput.Root` component
to control the value of the number input.

<ExampleTabs name="number-input-controlled" />

### Mobile Stepper

Here's an example of how to compose the number input as a mobile stepper.

<ExampleTabs name="number-input-with-stepper" />

### Mouse Wheel

Pass the `allowMouseWheel` prop to the `NumberInput.Root` component to enable or
disable the mouse wheel to change

<ExampleTabs name="number-input-with-mouse-wheel" />

### Disabled

Pass the `disabled` prop to the `NumberInput.Root` component to disable the
number input.

<ExampleTabs name="number-input-with-disabled" />

### Invalid

Use the `Field` component and the `invalid` prop to indicate that the number
input is invalid.

<ExampleTabs name="number-input-with-invalid" />

### Helper Text

Compose the `Field` and `Field.HelperText` components to add helper text to the
number input.

<ExampleTabs name="number-input-with-field" />

### Element

Here's an example of how to compose the number input with the input group
component to add an element on either the left or right.

<ExampleTabs name="number-input-with-element" />

### Scrubber

Use the `NumberInput.Scrubber` component to make the number input supports
scrubber interactions.

<ExampleTabs name="number-input-with-scrubber" />

### Hook Form

Here is an example of how to use the `NumberInput` component with
`react-hook-form`.

<ExampleTabs name="number-input-with-hook-form" />

### Closed Component

Here's how to setup the Number Input for a closed component composition.

<ExampleCode name="number-input-closed-component" />

If you want to automatically add the closed component to your project, run the
command:

```bash
npx @chakra-ui/cli snippet add number-input
```

Here's how to use the it

```tsx
<NumberInputRoot>
  <NumberInputField />
</NumberInputRoot>
```

## Props

### Root

<PropTable component="NumberInput" part="Root" />
